<template>
	<div>
		<div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;color: #999;">
			{{leftSelectItem.title}}
		</div>
		<div v-if="orderList &&orderList.length > 0">
			<div v-for="(item,index) in orderList" :key="index">
				<div style="display: flex;justify-content: space-between;text-align: center;margin-bottom: 10px;">
					<div style="flex:1" v-if="item.startTime && item.endTime">
						{{item.startTime.split(" ")[0]}}-{{item.endTime.split(" ")[0]}}
					</div>
					<div style="flex:1">{{item.disposeEntName}}</div>
					<div style="flex:1">{{item.wasteNameStr}}</div>
				</div>
				<div style="display: flex;justify-content: space-between;text-align: center;margin-bottom: 20px;">
					<div v-if="item.businessLicenseFileId" style="height: 120px;flex:1;"
						@click="previewFile(item,'businessLicenseFileId')">
						<img src="@/assets/yyzEmpty.png" style="height: 100%;width: 180px;" />
					</div>
					<div v-else style="height: 120px;flex:1;">
						<img src="@/assets/empty.png" style="height: 100%;width: 180px;" />
					</div>

					<div v-if="item.permissionFileId" style="height: 120px;flex:1"
						@click="previewFile(item,'permissionFileId')">
						<img src="@/assets/xkzEmpty.png" style="height: 100%;width: 180px;" />
					</div>
					<div v-else style="height: 120px;flex:1;">
						<img src="@/assets/empty.png" style="height: 100%;width: 180px;" />
					</div>

					<div v-if="item.orderFileId" style="height: 120px;flex:1" @click="previewFile(item,'orderFileId')">
						<img src="@/assets/orderEmpty.png" style="height: 100%;width: 180px;" />
					</div>
					<div v-else style="height: 120px;flex:1;">
						<img src="@/assets/empty.png" style="height: 100%;width: 180px;" />
					</div>

				</div>
			</div>
		</div>
		<div v-else style="text-align: center;">
			<img src="@/assets/bIcon7.png" style="width: 70px;height: 70px;margin-top: 200px;" />
			<div style="font-weight: bold;font-size: 20px;margin-top: 10px;color: #999999;">
				暂无合同
			</div>
		</div>

		<!--文件预览-->
		<el-dialog :visible.sync="visible1" width="800px" :title="'文件预览'">
			<!-- <div id="content" v-if="pdfUrl">
				<pdf ref="pdf" :src="pdfUrl" v-for="(page,index) in numPages" :page="page" />
			</div> -->
			<img v-for="(img,index) in pdfUrls" :key="index" :src="img" style="width: 100%;" />
		</el-dialog>

		<div style="position: fixed;right: 50px;top: 40%;font-weight: bold;color: #333;">
			<div @click="uploadInfo('add')" class="rightButton">
				<img src="@/assets/sIcon24.png" style="width: 60px;height: 34px;" />
				<div>更新</div>
			</div>

			<div @click="showBeizhu" class="rightButton">
				<img src="@/assets/sIcon25.png" style="width: 60px;height: 34px;" />
				<div>评价</div>
			</div>

			<div @click="tableData.visible = true,getHistory()" class="rightButton"
				v-if="leftSelectItem.categoryType != 'DRAFT'">
				<img src="@/assets/sIcon27.png" style="width: 60px;height: 34px;" />
				<div>历史</div>
			</div>
		</div>

		<!--备注-->
		<questions ref="questions" :categoryItemId="leftSelectItem.id" :documentId="documentId" @close="closeDia">
		</questions>

		<!--历史版本-->
		<el-dialog :visible.sync="tableData.visible" width="1200px" :title="leftSelectItem.title+'的文件列表'">
			<el-table :data="tableData.list" border style="width:100%">
				<el-table-column prop="disposeEntName" label="处置单位"></el-table-column>
				<el-table-column prop="wasteNameStr" label="危废"></el-table-column>
				<el-table-column prop="startTime" label="开始时间">
					<template scope="scope">
						<span>{{scope.row.startTime}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="editTime" label="截止时间">
					<template scope="scope">
						<span>{{scope.row.editTime}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间">
					<template scope="scope">
						<span>{{scope.row.createTime}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column width="120" label="操作">
					<template scope="scope">
						<el-button type="text" @click="previewFile(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery'
	import pdf from 'vue-pdf'
	import questions from '@/components/view/questions'

	let that
	export default {
		name: 'orderView',
		components: {
			pdf,
			questions
		},
		props: ['leftSelectItem'],
		data() {
			return {
				fileViewUrl: this.baseURL + 'file/download?fileId=',
				params: {
					facilitatorId: '',
					categoryMainId: '',
					ticketId: '',
					itemId: '',
					dateStr: new Date(),
				},
				orderList: [],
				visible1: false,
				pdfUrl: '',
				numPages: 1,
				visible4: false,
				params2: {
					remark: '',
					isQualified: '1'
				},

				tableData: {
					visible: false,
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				documentId: '',
				pdfUrls: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.categoryMainId = that.getQueryString("categoryMainId")
			that.params.ticketId = that.$store.state.token
			that.params.itemId = that.getQueryString("itemId")

			that.getDocumentEntCategoryOrderListByEntId()
		},

		methods: {

			//上传点击
			uploadInfo(optionType) {
				that.$emit("uploadInfo", optionType)
			},

			closeDia() {
				that.$emit("closeDia", true)
			},

			//备注点击
			showBeizhu() {
				if (that.orderList.length == 0) {
					return that.$message({
						message: '暂未上传文件',
						type: 'warning'
					});
				}
				that.$refs.questions.open()
			},

			handleSizeChange: function(val) {
				this.tableData.pageIndex = 1;
				this.tableData.pageSize = val;
				this.getHistory();
			},

			handleCurrentChange: function(val) {
				this.tableData.pageIndex = val;
				this.getHistory();
			},

			//历史版本点击
			getHistory() {
				const _this = this;
				that.ajax({
					url: '/documentOrder/pageDocumentEntCategoryOrder?ticketId=' + that.params.ticketId +
						'&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that.tableData.pageSize,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						categoryItemId: that.leftSelectItem.id,
					}),
					contentType: 'application/json',
					dataType: 'json',
					type: 'POST',
					success: function(result) {
						if (result.status == 1) {
							_this.tableData.list = result.data.records;
							_this.tableData.total = result.data.total;
						} else {
							that.$message(result.infoList[0], {
								status: 'info',
								timeout: 2500
							});
						}
					}
				});
			},

			previewFile(item, key) {
				//console.log(pdfUrl)
				//that.visible1 = true
				// let loading = this.$loading({
				// 	target: "#content",
				// 	lock: true,
				// 	text: 'Loading',
				// 	spinner: 'el-icon-loading',
				// 	background: 'rgba(0, 0, 0, 0.7)'
				// });
				// that.pdfUrl = pdf.createLoadingTask(pdfUrl)
				// that.pdfUrl.promise.then(pdf => {
				// 	//console.log(pdf)
				// 	that.numPages = pdf.numPages // 这里拿到当前pdf总页数
				// 	//loading.close();
				// })
				
				that.visible1 = true
				that.documentId = item.id
				that.fileId = item[key]
				that.getFileList(item[key])
				that.tableData.visible = false
			},

			handleSizeChange: function(val) {
				this.tableData.pageIndex = 1;
				this.tableData.pageSize = val;
				this.pageDocumentEntCategoryDraft();
			},
			handleCurrentChange: function(val) {
				this.tableData.pageIndex = val;
				this.pageDocumentEntCategoryDraft();
			},

			//获取合同列表
			getDocumentEntCategoryOrderListByEntId() {
				that.ajax({
					url: '/documentOrder/getDocumentEntCategoryOrderListByEntId?ticketId=' + that.params
						.ticketId,
					data: JSON.stringify({
						facilitatorId: that.params.facilitatorId,
						categoryItemId: that.leftSelectItem.id,
						status: "EFFECTIVE"
					}),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.status == 1) {
							that.orderList = result.data
							console.log(that.orderList)
							that.$forceUpdate()
						}
					}
				});
			},

			getFileList(fileId) {
				$.ajax({
					url: 'https://www.weifeibangbang.com/tsysFile/getPreviewFileIdListByFileId?ticketId=' +
						that.params.ticketId,
					data: {
						fileId: fileId,
					},
					contentType: 'application/x-www-form-urlencoded',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						that.pdfUrls = []
						for (let item of result.data) {
							that.pdfUrls.push(that.fileViewUrl + item)
						}
						//console.log(that.pdfUrls)
					},
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>